<template>
  <div>
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <h2 class="log">找回密码</h2>
    <div style="padding:0 15%;margin-top:20%">
      <p v-show="isshow11" style="color:red">请输入正确的格式</p>
      <van-cell-group>
        <van-field
          @blur="find()"
          v-model="email"
          type="password3"
          label="用户邮箱"
          placeholder="用户邮箱"
          @input="put2()"
        />
        <van-field
          @input="blur()"
          v-model="username"
          label="用户名"
          left-icon="contact"
          right-icon="question-o"
          placeholder="请输入用户名"
          @click-right-icon="$toast('请输入正确格式')"
          style="margin-bottom:10%"
        />
        <p v-show="isshow" style="color:red">请输入正确的格式</p>
        <van-field
          v-model="password1"
          type="password1"
          label="验证码"
          placeholder="验证码"
          style="margin-bottom:10%"
        />

        <div style="display:flex;justify-content: space-between;margin-bottom:10%">
          <button @click="huoqu()" style=" width:40%">获取验证码</button>
          <button @click="clk">验证</button>
          <!-- <input type="text" v-model="password4" style="width:50%; border:none" /> -->
        </div>

        <van-field
          @input="put1()"
          v-model="password2"
          type="password2"
          label="密码"
          placeholder="输入密码"
          style="margin-bottom:10%"
        />
        <p v-show="isshow2" style="color:red">请输入正确的格式</p>

        <p v-show="isshow3" style="color:red">请输入正确的格式</p>
      </van-cell-group>
    </div>
    <button @click="tab()" style="width:20%;margin:10% 40%">完成</button>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "log",
  data() {
    return {
      email: "",
      username: "",
      password1: "",
      password2: "",
      password3: "",
      isshow: false,
      isshow1: false,
      isshow2: false,
      isshow3: false,
      isshow11: false,
      a: 0,
      b: 0,
      c: 0,
      d: 0,
      e: 0
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    blur() {
      var yz = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      if (yz.test(this.username)) {
        this.isshow = false;
        this.a = 1;
      } else {
        this.isshow = true;
      }
    },
    huoqu() {
      console.log(this.email);
      if (this.isshow11 || this.email == "") {
        console.log(this.email);
        alert("请输入正确格式");
      } else {
        axios({
          url: "http://10.8.157.39:8080/secluxury/user/sendEmail",
          params: {
            email: this.email
          }
        }).then(data => {
          if (data.data == 1) {
            alert("已发送到邮箱请查看");
          }
        });
      }
    },
    find() {
      var fin = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (fin.test(this.email)) {
        this.isshow11 = false;
      } else {
        this.isshow11 = true;
      }
    },
    clk() {
      // if (this.password4 == this.password1) {
      //   this.isshow1 = false;
      //   this.b = 1;
      // } else {
      //   this.isshow1 = true;
      // }
      axios({
        method: "post",
        url: "http://10.8.157.39:8080/secluxury/user/validateYzm",
        params: {
          u_yzm: this.password1
        }
      }).then(res => {
        console.log(res.data);
        if (res.data == 0) {
          alert("验证成功");
          this.e = 1;
        } else {
          alert("失败了");
        }
      });
    },
    put1() {
      var pas = /^[a-zA-Z]\w{5,17}$/;
      if (pas.test(this.password2)) {
        this.isshow2 = false;
        this.c = 1;
      } else {
        this.isshow2 = true;
      }
    },
    put2() {
      if (this.password2 == this.password3) {
        this.isshow3 = false;
        this.d = 1;
      } else {
        this.isshow3 = true;
      }
    },
    tab() {
      if (this.e == 1) {
        axios({
          url: "http://47.102.221.184:8083/secluxury/user/editPassword",
          params: {
            email: this.username,
            password: this.password2
          }
        }).then(data => {
          console.log(data);
          if (data.data == 1) {
            alert("修改成功");
            this.$router.push("/log");
          }
        });
      } else {
        alert('请先进行邮箱验证')
      }
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
}
.log {
  width: 40%;
  font-weight: normal;
  margin: 10% 30%;
  text-align: center;
}
</style>
